<template>
   <!-- 加载图标样式18 -->
   <div class="loading"><span></span><span></span><span></span><span></span><span></span></div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.loading {
   display: inline-block;
   font-size: 0;
   padding: 0
}

.loading span {
   animation: loading-animation .8s linear infinite alternate;
   border-radius: 100%;
   display: inline-block;
   height: 12px;
   margin: 3px 2px;
   vertical-align: middle;
   width: 12px
}

.loading span:first-child {
   animation-delay: -1s;
   background: #ea4e3d;
}

.loading span:nth-child(2) {
   animation-delay: -.8s;
   background: #04be02;
}

.loading span:nth-child(3) {
   animation-delay: -.26666s;
   background: #1678ff;
}

.loading span:nth-child(4) {
   animation-delay: -.8s;
   background: #ffaa09;
}

.loading span:nth-child(5) {
   animation-delay: -1s;
   background: #e229ff;
}

@keyframes loading-animation {
   0% {
      transform: scale(0)
   }

   to {
      transform: scale(1)
   }
}
</style>
